<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <table border="1" style="width: 90rem; color: #fff; margin: auto;">
        <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>密码</th>
                <th>邮箱</th>
                <th>更新时间</th>
                <th>结束时间</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    </div>
    
    

</body>
<script>
    
    fun()

    function fun() {
       
        let xhr = new XMLHttpRequest()
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                let res = JSON.parse(xhr.responseText)
                console.log(res.data);

                // document.getElementById('header').innerHTML = res.msg
                var str = ''
                for (let i in res.data) {
                    str += `
                                <tr>
                                     <td>${res.data[i].id}</td>
                                     <td>${res.data[i].name}</td>
                                     <td>${res.data[i].password}</td>
                                     <td>${res.data[i].email}</td>
                                     <td>${res.data[i].created_at}</td>
                                     <td>${res.data[i].updated_at}</td>
                                
                                </tr>
                                `
                }
                document.getElementsByTagName('tbody')[0].innerHTML=str
            }
        }
        xhr.open('get', 'https://liu.zzgoodqc.cn/users', true)
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.send()
    }

    // function del(obj) {
    //     var msg = "您真的确定要删除吗？\n\n请确认!";
    //     if (confirm(msg)==true){
    //         alert('去删除');
    //         return true;
    //         obj.parentNode.parentNode.remove()
    //     }else{
    //         alert('取消删除');
    //         return false;
    //     }

       
    // }
</script>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    th, td{
        width: 4rem;
        text-align: center;
    }
    table{
        border: 1px solid #fff;
    }
    body {
        width: 100%;
        height: 49rem;
        background: url('http://pic.bizhi360.com/bbpic/97/11097.jpg') no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    div{
        width: 90%;
        height: 100%;
        background: url('http://pic.bizhi360.com/bbpic/97/11097.jpg') no-repeat;
        background-size: 100% 100%;
        /* //隐藏水平滚动条 */
        overflow-x:hidden; 
    }
</style>
</html>